<template>
  <div class="form">
    <h2 class="title"></h2>
    <a-divider :style="{ color: '#000' }" />
    <a-form :model="form" :style="{ width: '680px' }">
      <a-form-item field="seriesId" label="uid:" style="margin-bottom: 40px">
        <a-input
          v-model="form.seriesId"
          placeholder="请输入uid"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>
      <a-form-item
        field="username"
        label="用户名称："
        style="margin-bottom: 40px"
      >
        <a-input
          v-model="form.username"
          placeholder="请输入用户名"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>

      <a-form-item field="phone" label="手机号:" style="margin-bottom: 40px">
        <a-input
          v-model="form.phone"
          placeholder="请输入手机号"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>
      <a-form-item field="role" label="用户身份:" style="margin-bottom: 40px">
        <a-input
          v-model="form.role"
          placeholder="请输入用户身份"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>
      <div class="btn" style="width: 600px">
        <a-button type="primary" class="confirm" @click="confirmFun"
          >创建</a-button
        >
        <a-button type="dashed" class="cancel" @click="cancelFun"
          >取消</a-button
        >
      </div>
    </a-form>
    <a-divider :style="{ color: '#000' }" />
  </div>
</template>

<script>
export default {
  props: {
    teacherlist: { type: Array },
  },
  data() {
    return {
      // classname:[],
      // 表格收集的数据
      form: {
        seriesId: '',
        userName: '',
        phone: '',
        role: '',
      },
    };
  },

};
</script>

<style scoped lang="less">
.title {
  margin-left: 50px;
}
.btn {
  margin-left: 250px;
  .cancel {
    margin-left: 20px;
  }
}
.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);  
  width: 600px;
  height: 600px;
}
a-form-item {
  margin-bottom: 20px;
}
</style>